<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户信息统计</title>
		<link rel="stylesheet" type="text/css" href="stats/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="stats/css/admin.css"/>
	</head>
 
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
						<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">已注册用户总数</p>
										<p><span class="color-org">${userCountMessage.userCount}</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">充值用户总数</p>
										<p><span class="color-org"></span>${userCountMessage.rechargeUserCount}</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">剩余会员车位</p>
										<p><span class="color-blue"></span>${userCountMessage.ordinaryUserCount}<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe605;</span>
									</div>
									<div class="right-text-con">
										<p class="name">会员数量</p>
										<p><span class="color-green"></span>${userCountMessage.vipUserCount}</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
	
	<script src="stats/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="stats/lib/echarts/echarts-all.js"></script>
		
		<script type="text/javascript">
		
		var myChart = echarts.init(document.getElementById('chart'));
			    	var option={title : {
	        	        text: 'JCP地下停车场用户构成',
	        	        subtext: '内部数据，请勿外传',
	        	        x:'center'
	        	    },
	        	    tooltip : {
	        	        trigger: 'item',
	        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	        	    },
	        	    legend: {
	        	        orient: 'vertical',
	        	        x: 'left',
	        	        data: ['会员','已充值用户','普通用户']
	        	    },
	        	    series: [
	        	        {
	        	            name: '用户构成',
	        	            type: 'pie',
	        	            radius : '55%',
	        	            center: ['50%', '60%'],
	        	            data:[
	        	                {value:${userCountMessage.vipUserCount}, name:'会员'},
	        	                {value:${userCountMessage.rechargeUserCount}, name:'已充值用户'},
	        	                {value:${userCountMessage.ordinaryUserCount}, name:'普通用户'}
	        	            ],
	        	            itemStyle: {
	        	                emphasis: {
	        	                    shadowBlur: 10,
	        	                    shadowOffsetX: 0,
	        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	        	                }
	        	            }
	        	        }
	        	    ]};
			        myChart.setOption(option);
		
		</script>
	
	</body>


</html>